<template>
  <!-- 添加和修改订单对话框 -->
  <el-dialog
    :visible.sync="isVisible"
    :title="title"
    width="40%"
    @close="closeDialog">
    <el-form
      ref="orderForm"
      :model="orderForm"
      :rules="orderForm_rules"
      label-width="120px"
      class="demo-ruleForm">
      <el-form-item prop="order_no" label="订单号">
        <el-input v-model="orderForm.order_no" :validate-event="false" :disabled="isDisabled"></el-input>
      </el-form-item>

      <el-form-item prop="contract_no" label="合同编号">
        <el-input v-model="orderForm.contract_no" :validate-event="false"></el-input>
      </el-form-item>

      <el-form-item prop="kind" label="合同类型">
        <el-select v-model="orderForm.kind" placeholder="请选择">
          <el-option value="标准品" label="标准品"></el-option>
          <el-option value="定制品" label="定制品"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="name" label="订单名称">
        <el-input v-model="orderForm.name" :validate-event="false"></el-input>
      </el-form-item>

      <el-form-item prop="quantity" label="总数量">
        <el-input-number v-model="orderForm.quantity" :validate-event="false"></el-input-number>
      </el-form-item>

      <el-form-item prop="start" label="开始时间">
        <el-date-picker
          v-model="orderForm.start"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <el-form-item prop="finish" label="订单交期">
        <el-date-picker
          v-model="orderForm.finish"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span class="pl-5 colorRed">提示：带*的为必填内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="isVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit('orderForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {addOrder,updateOrder} from '@/api/order.js'
export default {
  name: 'OrderDialog',
  data() {
      return {
        //控制设备对话框显示
        isVisible:this.isShow,
        isDisabled:false,
        //订单表单
        orderForm: {
        order_no: "",
        contract_no: "",
        kind: "",
        name:"",
        quantity:"",
        start: "",
        finish:""
      },
        //表单校验
      orderForm_rules: {
        order_no: [
          {
            required: true,
            message: "请填写订单号",
            trigger: "blur",
          },
        ],
         contract_no: [
          {
            required: true,
            message: "请填写合同编号",
            trigger: "blur",
          },
        ],
          kind: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
         name: [
          {
            required: true,
            message: "请填写订单名称",
            trigger: "blur",
          },
        ],
         quantity: [
          {
            required: true,
            message: "请填写总数量",
            trigger: "blur",
          },
        ],
          start: [
          {
            required: true,
            message: "请选择开始日期",
            trigger: "change",
          },
        ],
          finish: [
          {
            required: true,
            message: "请选择结束日期",
            trigger: "change",
          },
        ],
      },
  }
 },
 props:{  
    isShow: Boolean,
    dialogRow: Object,
    title:String
  },
 mounted(){
    if (this.title === "添加订单") {
       this.$nextTick(() => {
        this.$refs["orderForm"].resetFields();
      });   
    } else {
       this.orderForm.order_no = this.dialogRow.order_no;  
       this.orderForm.contract_no = this.dialogRow.contract_no; 
       this.orderForm.name = this.dialogRow.order_name;  
       this.orderForm.quantity= this.dialogRow.quantity;  
       this.orderForm.kind = this.dialogRow.kind;   
       this.orderForm.start = this.dialogRow.start;  
       this.orderForm.finish = this.dialogRow.finish;      
       this.isDisabled = true;   
    }
 },
 methods:{
     onSubmit(orderForm){
     this.$refs[orderForm].validate((async valid=>{
         if(valid){
            // add
          if (this.title === "添加订单") {
              await addOrder(this.orderForm)
              this.$message.success('添加订单成功!')          
          } else {
            //edit
              await updateOrder(this.orderForm)
              this.$message.success('修改订单成功!')
           }
            this.$refs["orderForm"].resetFields(); //清空表单
            this.isVisible = false; //关闭对话框
            this.$emit("getOrderList"); //刷新列表
         }
     }))
     },
    //关闭表单
    closeDialog() {
      this.$emit("closeDialog");
    },
 }
}
</script>

<style lang = "scss" scoped>

</style>
